<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mini Web Write</title>
		<link rel="stylesheet" type="text/css" href="css/layout1.css" />
		<script type="text/javascript" src="js/lib/jquery.js"></script>
		<script type="text/javascript" src="js/controller/buttonEvent.js"></script>
		<script type="text/javascript" src="js/controller/tableEvent.js"></script>
		<!--<script type="text/javascript" src="js/controller/webFont.js"></script>-->
		<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
		<script>
			WebFont.load({
				// For google fonts
				google : {
					families : ['Droid Sans', 'Droid Serif']
				},
				// For early access or custom font
				custom : {
					families : ['Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Brush Script', 'Nanum Pen Script', 'Nanum Myeongjo'],
					urls : ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css', 'http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css', 'http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css', 'http://fonts.googleapis.com/earlyaccess/nanumpenscript.css', 'http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css']
				},
			});
		</script>
	</head>
	
	<body oncontextmenu="return false">
	
	<!--      메뉴바 부분                 -->
	
		<div id="editorHeader" class="header" onselectstart='return false;'>
			<div id="title">
				<h1>Mini Web Write</h1>
			</div>
			<div id="toolBar">
				<input type="button" id="bold" class="bold" onclick="iBold()" title = "굵게">
				<input type="button" id="italic" class="italic" onclick="iItalic()" title = "이탤릭">
				<input type="button" id="underline" class="underline" onclick="iUnderline()" title = "밑줄선">
				<input type="button" id="strikethrough" class="strikethrough" onclick="iStrikeThrough()" title = "취소선">
				<input type="button" id="link" class="link" onclick="iCreateLink()" title = "링크 삽입">

				<select id= "fontsize" onChange = "changefontsize()" title = "글자 크기">
					<option value = "9px">9px</option>
					<option value = "10px">10px</option>
					<option value = "11px">11px</option>
					<option value = "12px">12px</option>
					<option value = "13px">13px</option>
					<option value = "15px">15px</option>
					<option value = "18px">18px</option>
					<option value = "20px">20px</option>
				</select>

				<select id= "fontfamily" name = "fontName" onChange = "changefont()" title = "폰트 종류">
					<option value = "굴림">굴림</option>
					<option value = "바탕">바탕</option>
					<option value = "궁서">궁서</option>
					<option value = "Nanum Gothic">나눔고딕</option>
					<option value = "Nanum Gothic Coding">나눔고딕(코딩)</option>
					<option value = "Nanum Brush Script">나눔손글씨붓</option>
					<option value = "Nanum Pen Script">나눔손글씨펜</option>
					<option value = "Nanum Myeongjo">나눔명조</option>
					<option value = "Arial">Arial</option>
					<option value = "sans-serif">sans-serif</option>
					<option value = "Georgia">Georgia</option>
					<option value = "Lucida">Lucida</option>
				</select>

				<input type="button" id="left" class="left" onclick="iJustifyLeft()" title = "왼쪽 정렬">
				<input type="button" id="center" class="center" onclick="iJustifyCenter()" title = "가운데 정렬">
				<input type="button" id="right" class="right" onclick="iJustifyRight()" title = "오른쪽 정렬">
				<input type="button" id="indent" class="indent" onclick="iIndent()" title = "들여쓰기">
				<input type="button" id="outdent" class="outdent" onclick="iOutdent()" title = "내어쓰기">
				<input type="button" id="horizontal" class="horizontal" onclick="iHorizontalRule()" title = "수평선">
				<input type="button" id="numberlist" class="numberlist" onclick="iInsertOrderedList()" title = "문단 번호(숫자)">
				<input type="button" id="circlelist" class="circlelist" onclick="iInsertUnorderedList()" title = "문단 번호(모양)">
				<input type="button" id="superscript" class="superscript" onclick="iSuperScript()" title = "위첨자">
				<input type="button" id="subscript" class="subscript" onclick="iSubscript()" title = "아래첨자">
				<input type="button" id="textheight" class="textheight" onclick="iLineHeight()" title = "줄간격">
				<input type="button" id="textwidth" class="textwidth" onclick="iLetterSpace()" title = "글자 간격">

				<input type="button" class="undo" onclick="undo()" title = "취소">
				<input type="button" class="redo" onclick="redo()" title = "다시">
				<input type="button" class="copy" disabled = "disabled" onclick="iCopy()" title = "복사">
				<input type="button" class="paste" disabled = "disabled" onclick="iPaste()" title = "붙여넣기">
				<input type="button" class="cut" disabled = "disabled" onclick="iCut()" title = "잘라내기">
				<input type="button" class="delete" onclick="iDelete()" title = "삭제">

				<input type="button" class="image" onClick="iImage()"title = "그림 삽입">
				<input type="color" id="text-color">
				<input type="button" class="textcolor" onclick="iFontColor(document.getElementById('text-color').value)" title = "글자 색">
				<input type="color" id="text-back-color">
				<input type="button" class="hilight" onclick="iBackColor(document.getElementById('text-back-color').value)" title = "글자 배경 색">
				<input type="button" class="comment" onClick="createMemo()" title = "메모 삽입">
				<br>
				행 :
				<input type="text" id="rowCount">
				열 :
				<input type="text" id="colCount">
				<input type="button" id="createTable" class="createTable" onclick="createTable()" title="테이블 생성">
				<input type="button" id="removeTable" class="removeTable" onclick="removeTable()" title="테이블 삭제">

				<input type="button" id="addRowBtn" class="addrow" onclick="addTopRow()" title="위 행 삽입">
				<input type="button" id="addRowBtn" class="addrow" onclick="addBottomRow()" title="아래 행 삽입">

				<input type="button" id="addColBtn" class="addcolumn" onclick="addLeftCol()" title="왼쪽 열 삽입">
				<input type="button" id="addColBtn" class="addcolumn" onclick="addRightCol()" title="오른쪽 열 삽입">

				<input type="button" id="createTable" class="deleterow" onclick="deleteRow()" title="-Row">
				<input type="button" id="createTable" class="deletecolumn" onclick="deleteCol()" title="-Col">

				<input type="color" id="border-color">
				<input type="button" id="border" class="bordercolor" onclick="setBorderColor(document.getElementById('border-color').value)" title="테두리 색상 적용">
				<input type="color" id="background-color">
				<input type="button" id="color" class="backcolor" onclick="setBackColor(document.getElementById('background-color').value)" title="배경 색상 적용">

				<input type = "text" id = "findField" title = "검색" size = "10">
				<button onclick = "FindNext()">
					검색
				</button>
				<input type = "text" id = "changeField" title = "바꾸기"size = "10">
				<button onclick = "ChangeText()">
					바꾸기
				</button>
			</div>
		</div>
		
		<!--      컨텐츠 부분                 -->
		
		<div id="editorContainer">
			<div id="content" class="content" contenteditable="true" onmousedown = "RightMenu(event)"  >

			</div>
		<!--      우클릭 Context Menu    -->
			<div style="display:none;"   id="contextMenu">
				<table  border="0" cellpadding="0" cellspacing="0" style="border: thin solid #808080; cursor: default;" width="100px">
					<tr>
						<td >
						<div id ="rfont" onclick = "iCopy()" style="cursor: pointer;">
							글자 모양
						</div></td>
					</tr>
					<tr>
						<td >
						<div id ="rlist1" onclick = "iInsertUnorderedList()" style="cursor: pointer;">
							문단 모양
						</div></td>
					</tr>
					<tr>
						<td >
						<div id ="rlist2" onclick = "iInsertOrderedList()" style="cursor: pointer;">
							문단 번호
						</div></td>
					</tr>
					<tr>
						<td >
						<div id ="rtable" onclick = "iDelete()" style="cursor: pointer;">
							표 삽입
						</div></td>
					</tr>
					<tr>
						<td >
						<div id ="rcomment"  onclick = "iComment()" style="cursor: pointer;">
							메모 삽입
						</div></td>
					</tr>
					<tr>
						<td >
						<div id ="rlink" onclick = "iCreateLink()" style="cursor: pointer;">
							링크 삽입
						</div></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>